Avoid two monaco-editor instances on CDN bundlers#4308
Closed
trevor-scheer wants to merge 9 commits into
Closed
Conversation
Temporary pre-mode on this release branch so changesets versions the pending fix as a `0.37.6-alpha.N` prerelease published under the `alpha` dist-tag. Exit once the alpha validates against esm.sh and the fix lands on `main`.
The monaco store previously imported `monaco-graphql/esm/monaco-editor.js`, a re-export module that both registers monaco-editor language contributions and re-exports the lean monaco-editor namespace. esm.sh's standalone bundler splits that file in a way that leaves consumers with two monaco-editor instances: one with `graphql` and `json` registered, one without. The lazily-loaded tokenizer runs against the unregistered instance and throws `Cannot set tokens provider for unknown language json` on CDN setups, breaking syntax highlighting and completion. Inline the language contribution side effects and the lean monaco-editor entry directly, so there is no re-export module for the bundler to split. Single instance, all three languages. Refs #4303.
🦋 Changeset detectedLatest commit: 6204807 The changes in this PR will be included in the next version bump. Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Field was set as `typings: esm/index.d.ts`, pointing at the ESM build output. The ESM build is emitted by a separate tsgo invocation that doesn't coordinate with the CJS project reference graph that workspace dependents (e.g. `graphql-language-service-cli`) walk. `tsc` tolerated the misalignment by silently falling back to `dist/index.d.ts` next to `main`; `tsgo` (cut over in #4274) resolves project references more strictly and surfaces the gap as "Could not find a declaration file" during cold builds, breaking CI when a release branch's `ci:version` invokes a from-scratch `yarn build`. Switch to the modern `types` field name pointing at `dist/index.d.ts`, matching the sibling `graphql-language-service` package.
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to release/cdn-fix-alpha, this PR will be updated.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ `release/cdn-fix-alpha` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `release/cdn-fix-alpha`.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ # Releases ## graphiql@5.2.4-alpha.0 ### Patch Changes - Updated dependencies \[[`5f44a27`](5f44a27)]: - @graphiql/react@0.37.6-alpha.0 - @graphiql/plugin-doc-explorer@0.4.3-alpha.0 - @graphiql/plugin-history@0.4.3-alpha.0 ## @graphiql/plugin-code-exporter@5.1.3-alpha.0 ### Patch Changes - Updated dependencies \[[`5f44a27`](5f44a27)]: - @graphiql/react@0.37.6-alpha.0 ## @graphiql/plugin-doc-explorer@0.4.3-alpha.0 ### Patch Changes - Updated dependencies \[[`5f44a27`](5f44a27)]: - @graphiql/react@0.37.6-alpha.0 ## @graphiql/plugin-explorer@5.1.3-alpha.0 ### Patch Changes - Updated dependencies \[[`5f44a27`](5f44a27)]: - @graphiql/react@0.37.6-alpha.0 ## @graphiql/plugin-history@0.4.3-alpha.0 ### Patch Changes - Updated dependencies \[[`5f44a27`](5f44a27)]: - @graphiql/react@0.37.6-alpha.0 ## @graphiql/react@0.37.6-alpha.0 ### Patch Changes - [#4308](#4308) [`5f44a27`](5f44a27) Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Fix syntax highlighting and autocompletion when GraphiQL is loaded from a CDN such as esm.sh. The monaco store previously imported `monaco-graphql/esm/monaco-editor.js`, a re-export module that both registers monaco-editor language contributions and re-exports the lean monaco-editor namespace. Some CDN bundlers (esm.sh's `?standalone` mode in particular) split that file in a way that leaves the consumer with two monaco-editor instances: one with the `graphql` and `json` languages registered, and one without. The lazily-loaded json/graphql tokenization runs against the unregistered instance and throws `Cannot set tokens provider for unknown language json`, breaking syntax highlighting and completion. The store now imports the language contribution side effects and the lean monaco-editor entry directly, so there is no re-export module for the bundler to split. Behavior is unchanged for npm-installed consumers using a bundler (Vite, webpack, Rollup, Next.js); module deduplication already produced a single instance there. ## graphql-language-service-cli@3.5.1-alpha.0 ### Patch Changes - Updated dependencies \[[`e46fc55`](e46fc55)]: - graphql-language-service-server@2.14.10-alpha.0 ## graphql-language-service-server@2.14.10-alpha.0 ### Patch Changes - [#4308](#4308) [`e46fc55`](e46fc55) Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Point the package's `types` field at `dist/index.d.ts`, matching the CJS build output. The previous `typings: esm/index.d.ts` referenced the ESM build's output, which is emitted by a separate tsgo invocation that doesn't coordinate with the CJS project reference graph dependents rely on. `tsc` tolerated the misaligned path by falling back to `dist/index.d.ts` next to `main`; `tsgo` resolves project references more strictly and surfaced the misalignment as a "Could not find a declaration file" error during cold builds. ## vscode-graphql@0.13.6-alpha.0 ### Patch Changes - Updated dependencies \[[`e46fc55`](e46fc55)]: - graphql-language-service-server@2.14.10-alpha.0 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
#4211 added `*.css` to `@graphiql/react`'s `sideEffects` to keep webpack from tree-shaking `import 'graphiql/style.css'`. The glob landed in 0.37.4 alongside esm.sh's `?standalone` builder starting to emit a 115-line preload stub that fragments `monaco-editor` into two instances and breaks syntax highlighting on CDN consumers (#4303). Remove the glob to narrow the package.json delta between the last-working `0.37.3` and the first-broken `0.37.4`. If the resulting prerelease shows a small esm.sh stub again, a narrower form like `dist/**/*.css` is the follow-up to keep webpack happy.
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to release/cdn-fix-alpha, this PR will be updated.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ `release/cdn-fix-alpha` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `release/cdn-fix-alpha`.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ # Releases ## @graphiql/react@0.37.6-alpha.1 ### Patch Changes - [#4308](#4308) [`8ac17d1`](8ac17d1) Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Revert the `*.css` entry from `sideEffects` (added in #4211). The unbounded glob landed in the same release where esm.sh's `?standalone` builder started emitting a much larger preload stub that fragments `monaco-editor` into two instances and breaks syntax highlighting on CDN consumers (#4303). Removing it narrows the package.json delta between the last working version (0.37.3) and the first broken one (0.37.4). A more narrowly-scoped form may return in a follow-up if the webpack tree-shaking issue from #4211 recurs. Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
#4140 moved `react-compiler-runtime` from `peerDependencies` to `dependencies` in `@graphiql/react`, `@graphiql/plugin-doc-explorer`, and `@graphiql/plugin-history`. That change landed in 0.37.4 alongside esm.sh's `?standalone` builder starting to emit a 115-line preload stub that fragments `monaco-editor` into two instances and breaks syntax highlighting on CDN consumers (#4303). Move the dependency back to `peerDependencies` to narrow the package.json delta between the last-working `0.37.3` and the first-broken `0.37.4`. If the resulting prerelease shows a small esm.sh stub again, this is the trigger.
Lockfile regeneration following the `react-compiler-runtime` move back to `peerDependencies` in `598ffa3d`.
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to release/cdn-fix-alpha, this PR will be updated.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ `release/cdn-fix-alpha` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `release/cdn-fix-alpha`.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ # Releases ## @graphiql/plugin-doc-explorer@0.4.3-alpha.1 ### Patch Changes - [#4308](#4308) [`598ffa3`](598ffa3) Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Move `react-compiler-runtime` back to `peerDependencies` (revert of #4140). The earlier move to `dependencies` landed in 0.37.4 alongside esm.sh's `?standalone` builder starting to emit a 115-line preload stub that fragments `monaco-editor` into two instances on CDN consumers (#4303). Putting the dependency back in `peerDependencies` narrows the package.json delta between the last-working `0.37.3` and the first-broken `0.37.4`. ## @graphiql/plugin-history@0.4.3-alpha.1 ### Patch Changes - [#4308](#4308) [`598ffa3`](598ffa3) Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Move `react-compiler-runtime` back to `peerDependencies` (revert of #4140). The earlier move to `dependencies` landed in 0.37.4 alongside esm.sh's `?standalone` builder starting to emit a 115-line preload stub that fragments `monaco-editor` into two instances on CDN consumers (#4303). Putting the dependency back in `peerDependencies` narrows the package.json delta between the last-working `0.37.3` and the first-broken `0.37.4`. ## @graphiql/react@0.37.6-alpha.2 ### Patch Changes - [#4308](#4308) [`598ffa3`](598ffa3) Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Move `react-compiler-runtime` back to `peerDependencies` (revert of #4140). The earlier move to `dependencies` landed in 0.37.4 alongside esm.sh's `?standalone` builder starting to emit a 115-line preload stub that fragments `monaco-editor` into two instances on CDN consumers (#4303). Putting the dependency back in `peerDependencies` narrows the package.json delta between the last-working `0.37.3` and the first-broken `0.37.4`. Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Contributor
Author
|
This was an exploration branch that required actual (alpha) releases to npm to validate. I didn't find a solution on our side. The exploration continues here: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Alpha release branch for the
@graphiql/reactmonaco fix. In changesetspre-mode under the
alphadist-tag so the fix publishes as0.37.6-alpha.Nfor esm.sh validation before landing onmainunderlatest. Substantive change is in the second commit; see its body and#4303.
Plan
against this branch once the Release workflow finishes) to
publish
@graphiql/react@0.37.6-alpha.0.examples/graphiql-cdn/index.htmlandload in a browser: no
Cannot set tokens provider for unknown language jsonexception, GraphQL syntax colors render, andcompletion fires.
mainvia a cleanPR for the final
0.37.6release.